<template>
  <view class="nav-bar-wrap" :style="{ color: textColor }">
    <view class="nav-bar-content"
          :style="{ position: fixed ? 'fixed' : 'relative', height: statusBar.placeholderHeightPx, ...getNavStyle }"
    >
      <view :style="{ height: statusBar.statusBarHeightPx, background: statusbarColor }" />
      <view style="display: flex;flex: 1;" :class="{ unfull: !isCustom }">
        <template v-if="isCustom">
          <slot></slot>
        </template>
        <template v-else>
          <slot name="lf">
            <view class="nav-bar-lf" style="width: 72rpx">
              <uni-icons :color="textColor || ''" size="26" :type="isHome ? 'home' : 'back'" @click="leftButton()" />
            </view>
          </slot>
          <slot name="mid">
            <view class="nav-bar-mid">
              <view class="nav-bar-mid__title">
                {{ title }}
              </view>
            </view>
          </slot>
          <view v-if="titleCenter" style="width: 72rpx">
            <slot name="rt">
            </slot>
          </view>
          <view v-else :style="statusBar.rtBtnRect">
            <slot name="rt">
            </slot>
          </view>
        </template>
      </view>
    </view>
    <slot name="fixed-nav-bg" :status-height="statusBar.statusBarHeight" :navbar-heigth="statusBar.placeholderHeightNum">
    </slot>
    <view v-if="placeholder" class="nav-bar-placeholder" :style="{ height: statusBar.placeholderHeightPx }" />
  </view>
</template>

<script>
const systemInfo = uni.getSystemInfoSync() || {}
const wxBtnRect = uni?.getMenuButtonBoundingClientRect?.() ?? {
  width: 0,
  height: 0,
  left: 0,
  right: 0,
  top: 0,
  bottom: 0
}
const statusBarCache = {}

function statusBar(defaultHeightRpx = 88) {
  if (statusBarCache[defaultHeightRpx]) {
    return statusBarCache[defaultHeightRpx]
  }
  const defaultHeight = uni.upx2px(defaultHeightRpx)
  const statusObj = {}
  let statusBarHeight
  // #ifdef MP
  const maxHeight = Math.min(defaultHeight, wxBtnRect.height + wxBtnRect.top * 2)
  const diff = maxHeight - wxBtnRect.height
  statusBarHeight = Math.max(wxBtnRect.top - (diff / 2), 0)

  statusObj.rtBtnRect = {
    width: `${wxBtnRect.width + (uni.upx2px(750) - wxBtnRect.right)}px`,
    height: `${wxBtnRect.height}px`
  }

  statusObj.maxHeight = maxHeight
  statusObj.statusBarHeight = statusBarHeight
  statusObj.statusBarHeightPx = `${statusBarHeight}px`
  statusObj.placeholderHeightNum = statusBarHeight + maxHeight
  statusObj.placeholderHeightPx = `${statusBarHeight + maxHeight}px`
  // #endif
  // #ifndef MP
  statusBarHeight = systemInfo.statusBarHeight

  statusObj.rtBtnRect = {}

  statusObj.maxHeight = defaultHeight
  statusObj.statusBarHeight = statusBarHeight
  statusObj.statusBarHeightPx = `${statusBarHeight}px`
  statusObj.placeholderHeightNum = statusBarHeight + defaultHeight
  statusObj.placeholderHeightPx = `${statusBarHeight + defaultHeight}px`
  // #endif
  statusBarCache[defaultHeightRpx] = statusObj
  return statusObj
}

export default {
  props: {
    fixed: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: Boolean,
      default: true
    },
    isCustom: { // 导航栏完全由外部自定义
      type: Boolean,
      default: false
    },
    titleCenter: { // 标题是否相对屏幕宽度居中，否则根据环境判断，wx下中间区域除去右边按钮宽度
      type: Boolean,
      default: true
    },
    customNavStyle: { // 完全自定义导航栏样式
      type: Object,
      default: () => ({})
    },
    background: { // 导航栏背景色
      type: String,
      default: '#fff'
    },
    blur: { // 毛玻璃效果
      type: Boolean,
      default: true
    },
    statusbarColor: { // 状态栏背景色
      type: String,
      default: 'transparent'
    },
    defaultHeight: { // 导航栏默认高度
      type: Number,
      default: 88
    },
    title: { // title
      type: String,
      default: ''
    },
    textColor: { // 设置导航栏背景颜色，文字颜色
      type: String,
      default: '#555'
    },
    homePath: { // 设置导航栏左边返回首页的路径
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isHome: false
    }
  },
  computed: {
    getNavStyle() {
      if (Object.keys(this.customNavStyle).length > 0) {
        return this.customNavStyle
      }
      if (this.blur) {
        return { backdropFilter: `blur(10px)`, background: 'rgba(250,250,250,.8)' }
      }
      return { background: this.background }
    },
    statusBar() {
      return statusBar(this.defaultHeight)
    }
  },
  mounted() {
    const pages = getCurrentPages()
    this.isHome = pages.length === 1
  },
  methods: {
    leftButton() {
      if (this.isHome) {
        uni.reLaunch({
          url: this.homePath,
          animationType: 'pop-in',
          animationDuration: 200
        })
      }
      else {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 @mixin cc {
  display: flex;
  justify-content: center;
  align-items: center;
 }

 .nav-bar-wrap {
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  /* #ifndef H5 */
  width: 750rpx;
  /* #endif */
 }

 .nav-bar-content {
  z-index: 998;
  left: 0;
  right: 0;
  top: 0;
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  /* #ifndef H5 */
  width: 750rpx;
  /* #endif */
  display: flex;
  flex-direction: column;
  font-size: 28rpx;
  box-sizing: border-box;
 }

 .unfull {
  padding-left: 6rpx;
  padding-right: 6rpx;
 }

 .nav-bar-lf {
  @include cc;
 }

 .nav-bar-mid {
  @include cc;
  flex: 1;
  min-width: 0;
  padding: 0 20rpx;
 }

 .nav-bar-mid__title {
  line-height: 60rpx;
  font-size: 36rpx;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 }

 .nav-bar-placeholder {
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  /* #ifndef H5 */
  width: 750rpx;
  /* #endif */
 }
</style>
